<template>
  <view class="layout verify-login">
    <view class="title">密码登录</view>
    <view class="description">请输入登录密码,如果注册后未修改密码则无法登录</view>

    <view class="verify-input-box">
      <view class="verify-input-inner"><input type="password" v-model="password" placeholder="请输入登录密码" /></view>
    </view>
    <button class="login-btn" @tap="onClickPwdLogin">完 成</button>
  </view>
</template>

<script>
import uniApp from "@/utils/uni-app";
import user from "@/api/modules/user";
export default {
  data() {
    return {
      mobile: "",
      password: ""
    };
  },
  onLoad(options) {
    this.mobile = options.mobile;
    if (!this.mobile) {
      uni.navigateTo({
        url: "/pages/common/login_v2"
      });
      return false;
    }
  },
  methods: {
    onClickPwdLogin() {
      if (!this.password) {
        uniApp.alert("请输入登录密码");
        return false;
      }
      this.$store
        .dispatch("user/login", { mobile: this.mobile, password: this.password })
        .then(_ => {
          uniApp.toast(_.msg || "登录成功");
          uni.reLaunch({
            url: "/pages/common/home/index"
          });
        })
        .catch(e => {
          console.warn("%c [密码登录]", "color:red", e);
          uniApp.alert(e.message || e.data.msg || "登录失败");
        });
    }
  }
};
</script>

<style lang="scss" scoped>
.verify-login {
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  padding: 40upx 50upx;
  .title {
    color: #000000;
    font-size: 32upx;
  }
  .description {
    color: #656565;
    font-size: 24upx;
    line-height: 60upx;
    margin-bottom: 30upx;
  }
  .verify-input-box {
    overflow: hidden;
    background-color: #efefef;
    height: 80upx;
    border-radius: 80upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .verify-input-inner {
      height: 80upx;
      input {
        height: 80upx;
        line-height: 80upx;
        padding: 0 30upx;
      }
    }
  }
  .login-btn {
    margin-top: 100upx;
    height: 80upx;
    line-height: 80upx;
    border-radius: 80upx;
    background-color: #ffac02;
    width: 400upx;
    box-shadow: 0 10upx 0 0 #cc7323;
  }
}
</style>
